<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
        }
        body{
            background-color: #000;
        }
        span{
            width:30px;
            height: 30px;
            position: absolute;
            background: url("image/star.png") no-repeat center center;
            background-size:100%;
            animation: move 2s alternate infinite;
        }
            @keyframes move {
                0%{
                   opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
        span:hover{
            transform: scale(4) rotate(180deg) !important;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <!--<span id="span">-->
    <!--</span>-->
</body>
<script>
    var clientH = document.documentElement.clientHeight;
    var clientw = document.documentElement.clientWidth;
    for(var i=0;i<200;i++){
        var spans = document.createElement('span');
        document.body.appendChild(spans);
        //随机放span
        spans.style.top =Math.random()*clientH+'px';
        spans.style.left =Math.random()*clientw+'px';

        //缩放频率
        var rate = Math.random()*2;
        spans.style.transform = 'scale('+rate+')';

        //span的闪烁频率
        var rate = Math.random()*2;
        spans.style.animationDelay = rate + 's';
    }
</script>
</html>